<template>
  <div class="warning-instance-time-count w100 h100 common-chart" id="warning-instance-time-count-chart"></div>
</template>

<script>
  import Config from '../../../config'
  export default {
    name: 'WarningInstanceTimeCount',
    data () {
      return {}
    },
    props: {
      schedule: {
        type: Number,
        default: 0
      }
    },
    watch: {
      schedule (v1, v2) {
        console.log('该更新了')
        this.refresh()
      }
    },
    methods: {
      refresh () {
        this.getData()
      },
      getData () {
        const url = `${Config.FIREPLUG}/fireplug/alarm/count3`
        this.$http.get(url)
          .then(data => {
            const data1 = []
            const data2 = []
            data.forEach(item => {
              data1.push(item[0])
              data2.push(item[1])
            })
            this.drawChart(this.createAlarmTypeChartData(data1, data2))
          })
          .catch(e => {
            this.drawChart(this.createAlarmTypeChartData([], []))
          })
      },
      /**
       * 创建设备报警类型echart数据
       * */
      createAlarmTypeChartData (data1, data2) {
        const xAxis = {
          type: 'category',
          data: data1,
          splitLine: {
            show: false // 去除网格线
          },
          axisLine: {
            lineStyle: {
              color: '#142E52' // 坐标轴颜色
            }
          },
          axisTick: {
            show: false // 不显示刻度线
          }
        }
        const series = [
          {
            name: '传感器异常',
            type: 'line',
            animationDuration: 1500,
            symbolSize: 5,
            symbol: "circle",
            stack: '',
            data: data2,
            itemStyle: {
              normal: {
                color: '#00F6FF',
                borderColor: '#00F6FF'
              }
            },
            lineStyle: {        // 系列级个性化折线样式
              normal: {
                width: 2,
                type: 'solid',
                color: '#00F6FF'
              }
            },
            areaStyle: {

              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(43, 212, 255, 0.7)' // 0% 处的颜色
                  },  {
                    offset: 1, color: 'rgba(43, 212, 255, 0)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              }
            }
          }
        ]
        return {xAxis, series, id: 'warning-instance-time-count-chart'}
      },
      /**
       * 绘制echart图
       * @param Object {xAxis, series}
       * */
      drawChart (data) {
        const me = this
        // 基于准备好的dom，初始化echarts实例
        const dom = document.getElementById(data.id)
        if (!dom) {
          return
        }
        const chart = this.$echarts.init(dom)
        // 绘制图表
        chart.setOption({
          title: { text: '' },
          tooltip: {
            trigger: 'item',
            backgroundColor: '#00d4dc',
            formatter: function (params, ticket, callback) {
              return me.getTooptip(params)
            }
          },
          xAxis: data.xAxis,
          // x轴和y轴文字
          axisLabel: {
            color: '#598CC9'
          },
          yAxis: {
            show: true,
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#142E52'
              }
            },
            axisTick: {
              show: false // 不显示刻度线
            },
            splitNumber: 3
          },
          color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#3CDDFF'
          }, {
            offset: 1,
            color: '#3C81FF'
          }]),
          series: data.series,
          grid: {
            x: 60,
            y: 10,
            x2: 10,
            y2: 20,
            borderWidth: 1
          },
          barWidth: 10
        })
      },
      getTooptip (params) {
        return `<div class="tooltip-box">
          <div class="data-top">数量：${params.data}</div>
          <div class="data-bottom">时刻：${params.name}</div>
        </div>`
      },
    }
  }
</script>

<style lang="scss" scoped>
  .common-chart {
    & /deep/ .tooltip-box {
      color: #fff;
      width: 82px;
      .data-top {
        font-size: 16px;
      }
      .data-bottom {
        font-size: 12px;
      }
    }
  }
</style>
